<template>
	<div class="main">
		<van-nav-bar title="技师详情" left-arrow @click-left="$utils.back($route.path)" />
		<div class="mainimg">
			<img-box class="classImg" :img-url="model.Photo" />
			<div class="label mlr-24">
				<div class="heart"></div><span class="color-primary2 ml-8 mr-48 fw-b">无忧购</span>
				<img src="@/assets/images/physio/refund.png" /><span class="ml-4 mr-22">爽约包退</span>
				<img src="@/assets/images/physio/realname.png" /><span class="ml-4 mr-22">实名认证</span>
				<img src="@/assets/images/physio/credential.png" /><span class="ml-4 mr-22">资质证书</span>
			</div>
		</div>
		<div class="techincian mg-24 pd-24 br-24 bg-white">
			<div class="flex flex-s-c mb-24">
				<div class="fs-34 color-black2">{{ model.Name }}</div>
				<div class="collect" @click="goCollect">
					<img v-if="model.IsFavorite == 1" src="@/assets/images/physio/collect.png" />
					<img v-else src="@/assets/images/physio/uncollect.png" />
				</div>
			</div>
			<div class="address">
				<div class="address1"><img src="@/assets/images/physio/address1.png" />
					<p class="fs-28 color-primary1">{{ Distance }}KM</p>
				</div>
				<div class="ordernum">订单量 {{ model.FinishOrderCount }}</div>
			</div>
			<div class="mt-16 flex">
				<img class="skill" src="@/assets/images/physio/skill.png" />
				<p class="color-gray7">{{ model.SelfIntroduce }}</p>
			</div>
		</div>
		<div class="bg-white mg-24 pd-24 br-16">
			<div class="flex flex-s-c">
				<div class="fs-28 fw-b">服务项目</div>
			</div>
			<div v-if="serveList && serveList.length > 0">
				<div v-for="(item, index) in serveList" :key="index">
					<service :info="item" :cartRequestList="cartRequestList" @updateCart="updateCart"></service>
				</div>
			</div>
		</div>
		<div class="bg-white mg-24 pd-24 br-16">
			<div class="flex flex-s-c mb-48">
				<div class="fs-28"><span class="fw-b">服务评价</span><span class="color-gray7 mlr-24 fs-26"
						@click="goEvaluation(userId)">({{ model.CommentCount }}条评价)</span></div>
				<div @click="goEvaluation(userId)" class="fs-26">
					<span class="color-primary2">{{ model.Satisfaction }}%好评</span>
					<svg-icon icon-class="right" class="flex-s-0" @goPage="showWelcome = false" />
				</div>
			</div>
			<div class="valuation" v-if="model.Satisfaction > 0">
				<valuation :info="evaluationList"></valuation>
			</div>
		</div>

		<!-- 底部确认订单 -->
		<div class="fixed-bottom">
			<div class="flex flex-s-s ptb-20 plr-25 bg-white bottom-box">
				<div class="flex">
					<span class="fs-24 color-dark mt-22">合计</span>
					<!---->
					<span class="fs-28 color-primary3 mt-16">￥</span> <span class="color-primary3 fs-36  fw-600 mt-8">{{ totalPay
					}}</span>
				</div>
				<button class="bg-primary color-white placeorder" @click.stop="submitOrder">立即下单</button>
			</div>
		</div>
	</div>
</template>
<script>
import imgBox from 'components/imgBox'
import service from 'components/physio/service.vue'
import valuation from 'components/physio/valuation.vue'
import { GetArtificerInfo, GetArtificerProductPage, AddArtificerToFavorite, GetBookHomeOrderCommentPage } from 'api/physio'
import { AddOrEditUserTempCarList } from 'api/member'
export default {
	components: {
		imgBox,
		service,
		valuation
	},
	props: {
	},
	data() {
		return {
			id: 0, 	//技师id
			userId: 0, //用户id
			Distance: '0', //距离
			model: {

			},
			serveList: [],
			//totalPay: 0,
			cartRequestList: [],
			collect: false, //是否收藏
			evaluationList: [], //评论列表
			detailList: []
		}
	},

	mounted() {
		this.$nextTick(function () {
			window.addEventListener('scroll', this.onScroll)
		})
	},
	created() {
		this.userId = this.$route.query.userId  //用户id
		this.id = this.$route.query.id  //技师id
		this.Distance = this.$route.query.distance
		const detail = this.$route.query.detailList
		if (detail && detail[0].Amount) {
			this.detailList = this.$route.query.detailList
		}
		this.GetArtificerInfo()
		this.GetArtificerProductPage()
		this.GetBookHomeOrderCommentPage()
		setTimeout(() => {
			this.getDistance()
		}, 500)
	},
	computed: {
		distance() {
			this.getDistance();
		},
		totalPay() {
			let _total = 0
			if (this.cartRequestList.length > 0) {
				this.cartRequestList.forEach(ele => {
					_total += ele.V_GradePrice * ele.Amount
				});
			}
			return _total.toFixed(2)
		},
	},
	methods: {
		updateCart(item) {
			this.cartRequestList = item
		},

		GetArtificerInfo() {
			GetArtificerInfo({ artifcerUserId: this.userId }).then(res => {
				if (res.Data) {
					this.model = res.Data
					if (this.model.Photo) {
						this.model.Photo = res.Data.Photo.split(',')[0]
					}
				}
			})
		},
		GetArtificerProductPage() {
			GetArtificerProductPage({ artificerId: this.id }).then(res => {
				if (res) {
					console.log(this.detailList, "缓存吗")
					const result = res.Data
					if (this.detailList && this.detailList.length > 0) {
						result.Data.forEach(item => {
							this.detailList.forEach(ele => {
								if (item.ProductId === ele.ProductId) {
									const obj = {}
									const i = item.ProductModel.ProductSkuList[0]
									i.Amount = ele.Amount
									obj.Amount = i.Amount
									obj.ProductId = i.ProductId
									obj.SkuId = i.ID
									obj.Source = 0
									obj.StoreId = 0
									obj.V_GradePrice = i.V_GradePrice
									this.cartRequestList.push(obj)
								}
							})
						})
					}
					this.serveList.push(result.Data)
				}
			})

		},
		submitOrder() {
			var Amount = 0
			if (this.cartRequestList.length > 0) {
				this.cartRequestList.forEach(ele => {
					Amount += ele.Amount
				})
				if (Amount > 0) {
					AddOrEditUserTempCarList({ list: this.cartRequestList }).then(res => {
						if (res.Data) {
							this.$router.push('/physioSubmitOrder/' + this.userId)
						}
					})
				} else {
					this.$toast("请选择服务项目")
				}
			} else {
				this.$toast("请选择服务项目")
			}

		},

		//计算距离
		getDistance() {
			let lat1 = 0
			let lng1 = 0
			const _GeolocationData = localStorage.getItem('GeolocationData')
			console.log("1111距离")
			if (_GeolocationData) { // 存在定位缓存
				const _GeolocationObj = JSON.parse(_GeolocationData)
				if (_GeolocationObj.center && _GeolocationObj.center.length > 0) {
					lng1 = _GeolocationObj.center[0]
					lat1 = _GeolocationObj.center[1]
				} else if (_GeolocationObj.position) {
					lng1 = _GeolocationObj.position.lng
					lat1 = _GeolocationObj.position.lat
				}
			}
			lat1 = lat1 || 0;
			lng1 = lng1 || 0;

			const lat2 = this.model.DisStoreLat;
			const lng2 = this.model.DisStoreLng;
			if (lat2 === 0 || lng2 === 0) {
				this.Distance = '未知'
				return
			}
			var rad1 = lat1 * Math.PI / 180.0;
			var rad2 = lat2 * Math.PI / 180.0;
			var a = rad1 - rad2;
			var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
			var r = 6378137;
			var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2))) / 1000;
			this.Distance = distance.toFixed(2);
			return distance;
		},


		//收藏/取消收藏
		goCollect() {
			const data = {}
			let collect = true
			if (this.model.IsFavorite == 0) {
				collect = false
			}
			data.isCancel = collect
			data.artificerId = this.id
			AddArtificerToFavorite(data).then(res => {
				this.GetArtificerInfo()
			})
		},
		goEvaluation(id) {
			this.$router.push({
				path: '/physioValuationList',
				query: {
					id: id,
				}
			})
		},
		//获取评论
		GetBookHomeOrderCommentPage() {
			const requestData = {}
			requestData.PageIndex = 1
			requestData.PageSize = 10
			requestData.goodOrBad = 0
			requestData.artificerUserId = this.userId
			GetBookHomeOrderCommentPage(requestData).then(res => {
				if (res.Data) {
					this.evaluationList = res.Data.Data
					if (this.evaluationList.length > 0) {
						this.evaluationList.forEach((ele) => {
							ele.UserName = this.formattedName(ele.UserName)
						})
					}
				}
			})
		},
		formattedName(val) {
			return val.substring(0, 1) + new Array(3).join('*')
		}
	}
}
</script>
<style lang="scss" scoped>
.main {
	padding-bottom: 182px;
}

.mainimg {
	position: relative;
	margin-bottom: 56px;
}

.classImg {
	width: 750px;
	height: 750px;
}

.label {
	background: linear-gradient(270deg, #FFFAFE 0%, #FFF4FC 100%);
	border-radius: 16px;
	padding: 18px 28px;
	position: absolute;
	bottom: -32px;
	display: flex;
	align-items: center;
	width: calc(100% - 48px);
}

.label img {
	width: 32px;
}

.label1 {
	color: $physio-primary1;
	font-style: oblique;
	font-size: 28px;
	margin-right: 5px;
	font-weight: bold;
}

.label2 {
	color: #F17FD2;
	font-style: oblique;
	font-size: 28px;
	margin-right: 5px;
	font-weight: bold;
}

.service_item:last-child {
	border-bottom: none;
}

.placeorder {
	width: 224px;
	height: 72px;
	background: #24c373;
	border-radius: 36px;
	text-align: center;
	font-size: 28px;
}

.valuation {
	height: 500px;
	overflow: scroll;
}

.address {
	display: flex;
	align-items: center;
	padding-bottom: 28px;
	border-bottom: 1px solid #F2F3FC;

	img {
		width: 32px;
		height: 32px;
		margin-right: 4px;
	}
}

.address1 {
	display: flex;
	height: 32px;
	line-height: 32px;
}

.ordernum {
	margin-left: 16px;
	padding-left: 16px;
	border-left: 1px solid #7D8699;
	height: 32px;
	color: #7D8699;
}

.heart {
	position: relative;
	top: 0px;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: #F17FD2;
	transform: rotate(-45deg);
	margin-right: 8px;
}

.heart:before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #F17FD2;
}

.heart:after {
	content: "";
	position: absolute;
	top: 0px;
	left: 10px;
	width: 20px;
	height: 20px;
	background-color: #F17FD2;
	border-radius: 50%;
}

.collect {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0px 2px 8px 0px rgba(52, 38, 127, 0.1);
	text-align: center;
	line-height: 64px;

	img {
		width: 48px;
		height: 48px;
	}
}

.skill {
	width: 96px;
	margin-top: 4px;
}
</style>
